<template>
  <div
    class="login"
    :style="{
      background: isUseSso ? `#fff` : '',
    }"
  >
    <p v-if="isUseSso">
      {{
        isError ? errMsg : isLogout ? '退出中，请稍候...' : '登录中，请稍候...'
      }}
    </p>
    <LoginContent v-else>
      <template #loginPicture>
        <LoginPicture />
      </template>
      <template #loginForm>
        <LoginForm />
      </template>
    </LoginContent>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

import { useSso } from '@/hooks/useSso'

import LoginContent from './LoginContent.vue'
import LoginForm from './LoginForm.vue'
import LoginPicture from './LoginPicture.vue'

const route = useRoute()

const isLogout = computed(() => route.query.logout)

const isUseSso = import.meta.env.VITE_SSO === 'true'
const { isError, errMsg, initLogin } = useSso()
if (isUseSso) {
  initLogin()
}
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  vertical-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #838380;
}
</style>
